<template>
    <div style="width: 800px; text-align: center; display: inline-block">
        <view style="display: flex; height: 530px">
            <view class="left">
                <view class="img"><img :src="newgood.img" class="img" /></view>
                <view style="display: flex">
                    <img src="/a1.jpg" class="img1" @click="selectimg('1')" />
                    <img src="/a2.jpg" class="img1" @click="selectimg('2')" />
                    <img src="/a3.jpg" class="img1" @click="selectimg('3')" />
                    <img src="/a4.jpg" class="img1" @click="selectimg('4')" />
                </view>
            </view>
            <view class="right">
                <view class="info-item">
                    <view class="info-item-title">产品名称</view>:
                    <view class="info-item-content">{{ newgood.title }}</view>
                </view>
                <view class="info-item">
                    <view class="info-item-title">产品描述</view>:
                    <view class="info-item-content">{{ newgood.describe }}</view>
                </view>
                <view class="info-item">
                    <view class="info-item-title">产品价格</view>:
                    <view class="info-item-content">{{ newgood.price }}</view>
                </view>
                <view class="info-item">
                    <view class="info-item-title">产品数量</view>:
                    <view class="info-item-content">
                        <el-input-number v-model="num" :min="1" :max="99" size="small"></el-input-number>
                    </view>
                </view>
                <view class="info-item">
                    <view class="info-item-title">产品说明</view>:
                    <view class="info-item-content">{{ newgood.memo }}</view>
                </view>
            </view>
        </view>
        <view>
            <button type="button" @click="cart()" class="button">加入购物车</button>
            <button type="button" @click="closed()" class="button">返回</button>
        </view>
        <view>
            <div style="display: flex; margin-top: 20px">
                <div class="mytitle">
                    <!-- <router-link
            :to="{
              path: '/good-details/good-srelate',
              query: { goodclass: 'big' },
            }"
          >
            大型果</router-link
          > -->
                    <router-link :to="{ path: '/good-details/good-srelate', query: { goodtype: '热销水果' } }">热销水果</router-link>
                </div>
                <!-- <div class="mytitle" @click="gotoPage(1)">中型果</div>
        <div class="mytitle" @click="gotoPage(2)">小型果</div>
        <div class="mytitle" @click="gotoPage(3)">热销水果</div> -->
                <div class="mytitle" @click="gotoPage(4)">当季水果</div>
                <div class="mytitle" @click="gotoPage(5)">养生水果</div>
                <div class="mytitle" @click="gotoContent()">各类水果窗口</div>
            </div>
            <hr />
            <router-view></router-view>
        </view>
    </div>
</template>
<script setup>
import { getgoodbyid } from "../utils/good"
import { addcart } from "../utils/cart";
import { ElMessage } from "element-plus";
import { computed, inject, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { mapGetters, useStore } from "vuex";
const store = useStore();
const num = ref(1);
const route = useRoute();
const router = useRouter();
const newgood = ref(store.getters.getGood);
function cart() {
    if (store.getters.getUser.username == "未登录") {
        ElMessage({
            message: "未登录",
            type: "error",
        });
        router.push("/login");
        return;
    }
    let param = {
        id: newgood.value.id,
        title: newgood.value.title,
        describe: newgood.value.describe,
        price: newgood.value.price,
        num: num.value,
        img: newgood.value.img,
        memo: newgood.value.memo,
        clicknum: 0,
        goodtype: "",
        createBy: store.getters.getUser.username,
        remark: "",
        status: "未提交",
    };
    addcart(param).then((response) => {
        console.log("response：", response);

        ElMessage({
            showClose: true,
            message: "商品：" + param.title + "添加购物车成功！",
            type: "success",
        });
        store.dispatch("addCarList", param);
    });

    // cartlist.value.push(param);
}
function selectimg(val) {
    newgood.value.img = "/a" + val + ".jpg";
}
function closed() {
    router.go(-1);
}
function gotoContent() {
    let routeUrl = router.resolve({
        path: "/good-srelate",
        query: { goodclass: route.query.goodclass },
    });
    window.open(routeUrl.href, "_blank");
}
function gotoPage(id) {
    let pageName = "";
    if (id == 0) {
        pageName = "big";
    }
    if (id == 1) {
        pageName = "median";
    }
    if (id == 2) {
        pageName = "small";
    }
    if (id == 3) {
        pageName = "热销水果";
    }
    if (id == 4) {
        pageName = "当季水果";
    }
    if (id == 5) {
        pageName = "养生水果";
    }
    router.replace({
        path: "/good-details/good-srelate",
        query: { type: id, goodclass: pageName },
    });
}
onMounted(() => {
    console.log("id", route.query.id);
    console.log("good", newgood.value);
    num.value = newgood.value.num;
    if (route.query.id == undefined) return;
    getgoodbyid(route.query.id).then(
        (response) => {
            console.log(response);
            if (response.code == 200) {
                //正确读取到数据再渲染
                newgood.value.id = response.data.id;
                newgood.value.title = response.data.title;
                newgood.value.describe = response.data.mydescribe;
                newgood.value.price = response.data.price;
                newgood.value.num = response.data.num;
                newgood.value.img = "http://localhost/dev-api" + response.data.img;
                newgood.value.memo = response.data.memo;
            }
            // this.goodslist = response.data.list;
        }
    );
    gotoPage(0); //初始化下面的相关列表
});
</script>
<style scoped>
.machine-list-card {
    width: 950px;
    height: 530px;
    /* margin: 5px auto; */
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(160, 160, 160, 0.3);
    margin-bottom: 10px;
    margin-right: 10px;
}

.mytitle {
    width: 120px;
    height: 40px;
    background-color: seashell;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    margin-left: 4px;
}

.left {
    width: 460px;
    height: 400px;
    /* display: flex; */
    justify-content: center;
    align-items: center;
}

.button {
    width: 100px;
    height: 40px;
    margin-left: 30px;
    background-color: #8b8c33;
    color: white;
    /* display: flex; */
    justify-content: center;
    align-items: center;
}

.right {
    width: 700px;
    height: 400px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.img {
    width: 390px;
    height: 390px;
}

.img1 {
    width: 96px;
    height: 100px;
    margin-left: 12px;
}

.img image {
    width: 370px;
    height: 370px;
}

.info-item {
    display: flex;
    white-space: nowrap;
}

.info-item-title {
    /* font-weight: bold; */
    font-size: 20px;
    width: 4em;
    text-align: justify;
    text-align-last: justify;
}

.info-item-content {
    margin-left: 10px;
    font-size: 20px;
    overflow: hidden;
}
</style>
